<example name="Island Ng">
  <file type="html">
    <div ng-app="Example.island" ng-strict-di>
      <rg-island>
        <rg-island-header border="true">
          This is header
        </rg-island-header>
        <rg-island-content>
          This is content
        </rg-island-content>
      </rg-island>
    </div>
  </file>

  <file type="js">
    import angular from 'angular';
    import IslandNg from '@jetbrains/ring-ui/components/island-ng/island-ng';

    const exampleModule = angular.module('Example.island', [IslandNg]);
  </file>
</example>

<example name="Island Ng (scrollable)">
  <file type="css">
    :global(.limited-island) {
      height: 200px;
      width: 200px;
    }
  </file>

  <file type="html">
    <div ng-app="Example.island" ng-strict-di>
      <rg-island narrow="true" class="limited-island">
        <rg-island-header border="true">
          Title
        </rg-island-header>
        <rg-island-content fade="true">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only five
          centuries, but also the leap into electronic typesetting, remaining
          essentially unchanged.
        </rg-island-content>
      </rg-island>
    </div>
  </file>

  <file type="js">
    import angular from 'angular';
    import IslandNg from '@jetbrains/ring-ui/components/island-ng/island-ng';

    const exampleModule = angular.module('Example.island', [IslandNg]);
  </file>
</example>
